<template>
  <div>
    <h1>lodash</h1>
    <div>
      {{ arr_data }}
    </div>
    <div>
      {{ origin_data }}
    </div>
    <div>
      <a-button
        type="primary"
        ghost
        @click="debounced(handleSumbit, { name: 'Dark', age: 18, sex: 1 })"
      >
        点击提交
      </a-button>
    </div>
  </div>
</template>
<script>
import { lodash } from "./utils";
import {
  chunk,
  compact,
  difference,
  differenceBy,
  drop,
  dropRightWhile,
  dropWhile,
  sortedIndex,
  sortedUniq,
  union,
  unionBy,
  unionWith,
  isEqual,
  uniq,
  uniqBy,
  uniqWith,
  without,
  size,
  sortedUniqBy,
  tail,
  sortBy,
  clone,
} from "lodash-es";
/*
 *chunk 数组分组
 *compact 过滤假值
 *tail
 *take
 *union,
  unionBy,
  unionWith,
 *uniq,
  uniqBy,
  uniqWith
 *
 *
 *
 */
export default {
  data() {
    return {
      debounced: lodash.debounced,
      throttled: lodash.throttled,
      arr_data: undefined,
      origin_data: undefined,
    };
  },
  created() {
    /*
    chunk 数组分组
    _.chunk(array, [size=1])
    参数
    array (Array): 需要处理的数组
    [size=1] (number): 每个数组区块的长度 */
    // const arr = [2, 4, 6, 8, 10];
    // const newArr = chunk(arr, 3);
    // console.log("newArr:", newArr);
    // [ [ 2, 4, 6 ], [ 8, 10 ] ]

    /*
    compact 过滤假值，创建一个新数组，包含原数组中所有的非假值元素。例如false, null,0, "", undefined, 和 NaN 都是被认为是“假值”。
    _.compact(array)
    参数
    array (Array): 待处理的数组 */
    // const arr = [0, 1, false, 2, "", 3];
    // const newArr = compact(arr);
    // console.log("newArr:", newArr);
    // [ 1, 2, 3 ]

    // const arr = [2, 4, 6, 8, 10];
    // const newArr = difference(arr, [4, 6]);
    // console.log("newArr:", newArr);
    // // [ 2, 8, 10 ]

    // const arr = [
    //   { x: 1, y: 1 },
    //   { x: 2, y: 2 },
    //   { x: 3, y: 3 },
    // ];
    // const arr2 = [
    //   { x: 4, y: 1 },
    //   { x: 5, y: 2 },
    // ];
    // const newArr = differenceBy(arr, arr2, "y");
    // console.log("newArr:", newArr);

    // const arr = [2, 4, 6, 8, 10];
    // const newArr = drop(arr, 2);

    // const arr = [
    //   { user: "barney", active: true },
    //   { user: "fred", active: false },
    //   { user: "pebbles", active: false },
    // ];

    // const newArr = dropRightWhile(arr, function (o) {
    //   return !o.active;
    // });

    // const arr = [30, 50];
    // const newArr = sortedIndex(arr, 60);

    // const arr = [2, 2, 4, 6, 7, 7, 78, 10];
    // const arr = [{ name: "xiaoming" }, { name: "dog" }, { name: "xiaoming" }];
    // const newArr = sortedUniqBy(arr, "name");

    // const arr = [{ name: "xiaoming" }];
    // const newArr = unionBy(
    //   arr,
    //   [{ name: "dog" }, { name: "xiaoming" }],
    //   "name"
    // );
    // console.log(newArr);

    // const arr = [{ name: "xiaoming" }];
    // const newArr = unionWith(
    //   arr,
    //   [{ name: "dog" }, { name: "xiaoming" }],
    //   isEqual
    // );

    // const arr = [{ name: "xiaoming" }, { name: "dog" }, { name: "xiaoming" }];
    // const newArr = without(arr, { name: "xiaoming" });

    // const arr = [{ name: "xiaoming" }, { name: "dog" }, { name: "cat" }];
    // const newArr = tail(arr);
    // console.log(newArr);

    // const arr = [
    //   { user: "fred", age: 48 },
    //   { user: "barney", age: 36 },
    //   { user: "fred", age: 40 },
    //   { user: "barney", age: 34 },
    // ];
    // const newArr = sortBy(arr, function (o) {
    //   return o.age;
    // });

    // const arr = [
    //   { name: "xiaoming" },
    //   { name: "dog" },
    //   { name: "cat", info: [{ infoDetail: "12312" }] },
    //   function (a, b) {
    //     return (a = b);
    //   },
    // ];
    // const newArr = clone(arr);
    // newArr.push(2);

    const arr = [
      { name: "xiaoming" },
      { name: "dog" },
      { name: "cat", info: { address: "翻斗花园" } },
    ];
    const newArr = [
      { name: "xiaoming" },
      { name: "dog" },
      { name: "cat", info: { address: "翻斗花园" } },
    ];

    console.log(isEqual(arr, newArr));

    this.arr_data = newArr;
    this.origin_data = arr;
  },
  mounted() {},
  methods: {
    handleSumbit(data) {
      console.log("data", data);
    },
  },
  components: {},
};
</script>
